<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org" lang="en">

<head th:replace="fragments/headTag :: headTag">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>QuDEx Repository Tools - Collections Manager</title>

<!-- Bootstrap -->
<link
	href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css"
	th:href="@{/webjars/bootstrap/3.0.3/css/bootstrap.css}"
	rel="stylesheet" />
<link href="../../../resources/css/navbar.css"
	th:href="@{/resources/css/navbar.css}" rel="stylesheet" />
<!-- JQuery -->
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
	th:src="@{/webjars/jquery/1.9.0/jquery.min.js}"></script>
<script
	src="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"
	th:src="@{/webjars/bootstrap/3.0.3/js/bootstrap.min.js}"></script>

<!-- Spring JS and Ajax -->
<script type="text/javascript" th:src="@{/resources/dojo/dojo.js}"></script>
<script type="text/javascript" th:src="@{/resources/spring/Spring.js}"></script>
<script type="text/javascript"
	th:src="@{/resources/spring/Spring-Dojo.js}"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div class="container">
		<div th:include="fragments/bodyHeader :: bodyHeader" th:remove="tag">This
			is the navigation bar here</div>

		<div class="row">
			<div class="col-md-4">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 th:text="#{updateCollection.column1.title}"
							class="panel-title">Information</h3>
					</div>
					<div class="panel-body">
						<a href="#" th:text="#{process.col.column1.link}"
							data-toggle="collapse" data-target="#divInfo">Description of
							Collection-level Spreadsheet (show/hide)</a>
						<div id="divInfo" class="panel-collapse collapse">
							<div class="panel-body" th:utext="#{info.spreadsheet.collection}">
								<h4>More information</h4>
								<p>The Collection Level spreadsheet is used to describe
									either QuDEx collections or sub-collections.</p>
								<p>A QuDex Collection is a Fedora Object that contains
									metadata annotations to describe a Qualitative Study and also
									contains the QuDEx XML document describing all the documents
									and elements associated with this study. The XML instance is
									stored as a special data type within the object.</p>
							</div>
						</div>
						<br /> <br />
						<!--<p>
							<b th:text="#{process.col.column1.note}">Notes</b>
						</p>
						<p th:utext="#{process.col.column1.text}">
							<b>*</b> If a collection is selected, the relationship
							information in the spreadsheet (field rel:isPartOf) will be
							ignored. In other words, all the collections described in the
							spreadsheet will be sub-collections of selected Collection.
						</p>-->
						<form id="form-cancel" th:action="${flowExecutionUrl}"
							method="post">
							<input class="btn btn-danger" data-toggle="popover"
								th:attr="data-content=#{updateCollection.column1.tooltip.cancel}"
								th:value="#{process.col.column2.form.cancel}"
								name="_eventId_cancel" type="submit" value="Cancel" />
						</form>
						<div id="error"
							th:if="${flowRequestContext.messageContext.hasErrorMessages()}">
							<h4 th:text="#{process.col.column1.error}">Errors</h4>
							<font
								th:each="message : ${flowRequestContext.messageContext.getMessagesBySource('filesModel.spreadsheet')}"
								th:text="${message.text}" color="red">the error message</font> <font
								th:each="message : ${flowRequestContext.messageContext.getMessagesBySource('filesModel.collectionsIds')}"
								th:text="${message.text}" color="red">the error message</font>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-8">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 th:text="#{updateCollection.title}" class="panel-title">Collection-level
							Spreadsheet</h3>
					</div>
					<div class="panel-body">
						<div th:if="${printTree}" th:utext="${printTree.get(0)}" class="well">the
							printed tree here</div>
						<br />
						<form id="form-collection" th:action="${flowExecutionUrl}"
							class="form-horizontal" method="post"
							enctype="multipart/form-data">
							<fieldset>
								<legend th:text="#{process.col.column2.form1.title}">1.
									Upload a Collection-level spreadsheet</legend>
								<p th:text="#{updateCollection.text}">Upload a
									Collection/Sub-collection Spreadsheet. This will update
									existing collections/sub-collections.</p>
									<br />
								<div id="root-col-sp2" class="form-group">
									<label class="col-md-4 control-label" for="sp-upload-1"><span
										th:text="#{process.col.column2.form.browse.label}"></span></label>
									<div class="col-md-4">
										<div class="input-group">
											<div class="input-group">
												<span class="input-group-btn"> <span
													class="btn btn-primary btn-file"> <span
														th:text="#{process.col.column2.form.browse}">Browse&hellip;</span>
														<input name="spreadsheet" id="sp-upload-1" type="file"
														class="form-control" />
												</span><input type="text" class="form-control" readonly="readonly" />
												</span>
											</div>
											<span th:utext="#{process.col.column2.form.browse.help}"
												class="help-block"> Select the file to upload</span>
										</div>
									</div>
								</div>
								<input th:field="${filesModel.collectionsIds}" type="hidden"
									value="NOCOLLECTION" />
								<div class="form-group">
									<label class="col-md-4 control-label" for="load"><span></span></label>
									<div class="col-md-4">
										<div class="input-group">
											<input id="load" class="btn btn-primary"
												th:value="#{process.col.column2.form.submit}"
												name="_eventId_uploadCollection" type="submit"
												value="Upload Spreadsheet" />
										</div>
									</div>
								</div>
							</fieldset>
						</form>
					</div>
				</div>
			</div>
			<!-- DIV content -->
		</div>
		<!-- Progress Bar -->
		<div class="modal js-loading-bar">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body">
						<h4 th:text="#{fileView.progressTitle}">Loading Templates</h4>
						<div class="progress progress-striped active">
							<div class="progress-bar progress-bar-info" style="width: 0%;"></div>
						</div>
						<span id="pbtext" class="hide" th:text="#{fileView.pbMessage}">Loading...
							Please be patient</span> <strong><span id="pbtxt" class="hide"
							style="text-align: center; width: 100%;"
							th:text="#{fileView.pbMessage}">Loading... Please be
								patient</span></strong>
					</div>
				</div>
			</div>
		</div>
		<div id="footer" th:include="fragments/footer :: footer"></div>
	</div>
	<script>
		/*http://stackoverflow.com/questions/16808205/keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload/16813902#16813902*/
		$(document).ready(
				function() {

					/*Tooltips*/
					$('[data-toggle="tooltip"]').tooltip({
						'placement' : 'top'
					});

					$('[data-toggle="popover"]').popover({
						trigger : 'hover',
						'placement' : 'top'
					});
					// Holds the internal ID of the callback interval for the progress bar
					var intervalID;

					function initProgressBar() {
						var $modal = $('.js-loading-bar'), $bar = $modal
								.find('.progress-bar');
						var is_chrome = window.chrome;
						if (is_chrome) {
							$bar.css('width', '100%');
							$bar.text($('#pbtext').text());
							$modal.modal('show');
						} else {
							$modal.modal('show');
							intervalID = setInterval(getDataFromServer, 1500);
						}
					}

					function clearTimer() {
						clearInterval(intervalID);
						console.log("Interval cleared");
					}

					/* Initiate progress bar calls */
					function getDataFromServer() {
						dwrService.getActualProgress({
							callback : getDataFromServerCallBack,
							errorHandler : function(errorString, exception) {
								console.log("Oops: " + errorString);
							}
						});
					}

					function getDataFromServerCallBack(dataFromServer) {
						// Modify Progress bar
						var $modal = $('.js-loading-bar'), $bar = $modal
								.find('.progress-bar');
						$bar.css('width', dataFromServer);
						if (dataFromServer.progress == "0%") {
							$('#pbtxt').removeClass('hide');
							$('#pbtxt').addClass('show');
						}
						//$('#pbtxt').text(dataFromServer.info);
						if (dataFromServer.progress == "100%")
							clearTimer();
					}

					$('.js-loading-bar').modal({
						backdrop : 'static',
						show : false
					});

					$('#load').click(function() {
						initProgressBar();
					});
				});
	</script>
</body>
</html>